
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} from 'react-native';
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
export default class MineHead extends Component {
  render() {
    return (
      <View style={styles.container}>
        {this.renderTopView()}
        {this.renderBottomView()}
      </View>
    );
  }
  renderTopView(){
  	return(
      <View style={styles.topViewStyle}>
        <Image source={{uri:'see'}} style={styles.leftIconStyle}/>
        <View style={styles.centerViewStyle}>
           <Text style={{fontSize:18, color:'white', fontWeight:'bold'}}>小码哥电商</Text>
           <Image source={{uri: 'avatar_vip'}} style={{width:17, height:17}}/>
         </View>
         <Image source={{uri: 'icon_cell_rightArrow'}} style={{width:8, height:13, marginRight:8}}/>
      </View>
    );
  }
  renderBottomView(){
    return(
      <View style={styles.bottomViewStyle}>
        {this.renderBottomItem()}
      </View>
    );
  }
  renderBottomItem(){
    var itemArr = [];
    var data = [{'num':'100','title':'码哥券'},{'num':'12','title':'评价'},{'num':'50','title':'收藏'}];
    for(var i=0; i<data.length; i++){
      itemArr.push(
        <View key={i} style={styles.bottomInnerViewStyle}>
          <Text style={styles.innerViewTextStyle} >{data[i].num}</Text>
          <Text style={styles.innerViewTextStyle}>{data[i].title}</Text>
        </View>
      );
    }
    return itemArr;
  }
}
const styles = StyleSheet.create({
  container: {
    height:Platform.OS==='ios'?400:200,
    backgroundColor:'rgba(255,96,0,1.0)',
  },
  bottomViewStyle:{
    flexDirection:'row',
    position:'absolute',
    bottom:0,
  },
  bottomInnerViewStyle:{
    width:width/3+1,
    height:40,
    backgroundColor:'rgba(255,255,255,0.4)',
    alignItems:'center',
    justifyContent:'center',
    borderRightColor:'white',
    borderRightWidth:1,
  },
  innerViewTextStyle:{
    color:'white',
  },
  centerViewStyle:{
    flexDirection:'row',
    width:width * 0.72
  },
  leftIconStyle:{
    width:70,
    height:70,
    borderRadius:35,
    borderWidth:3,
    borderColor:'rgba(0,0,0,0.2)'
  },
  topViewStyle:{
    flexDirection:'row',
    marginTop:Platform.OS==='ios'?280:80,
    // 设置侧轴的对齐方式
    alignItems:'center',
    // 设置主轴的对齐方式
    justifyContent:'space-around'
  },

});
